<template>
	<div class="cart-item">
	<checkButton class="checkButton" :isChecked='item.isChecked' @click='checkClick'></checkButton>
		<div class="item-image">
		  <img :src="item.image" alt="">
		</div>
		<div class="info">
		  <p class="title" >{{item.title}}</p>
		  <p class="desc">{{item.desc}}</p>
		  <div class="price-count">
		    <p class="price">¥{{item.price}}</p>
				<p class="count">x{{item.count}}</p>
		    <counter :item="item"/>
		  </div>
		</div>
	</div>
</template>

<script>
	import checkButton from 'components/content/checkButton/checkButton.vue'
	
	export default {
		name:'cartListItem',
		props:{
			item:Object
		},
		components:{
			checkButton
		},
		methods:{
			checkClick(){
				this.item.isChecked = !this.item.isChecked
			}
		}
	}
</script>

<style scoped>
	.cart-item{
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	  width: 100vw;
	  height: 20vh;
	  padding: 5px;
	  border-bottom: 1px solid #ccc;
	  /*margin-top: .5rem;*/
	}
	.item-image{
	  height: 100%;
	  width: 25%;
	
	}
	.item-image img{
	  width: 100%;
	  height: 100%;
	  border-radius: 10px;
	}
	.info{
	  width: 65%;
	  height: 100%;
	  display: flex;
	  flex-direction: column;
	  /*align-content: space-around;*/
	  justify-content: space-between;
	  /*align-content: space-between;*/
	}
	
	.price-count{
	  display: flex;
	  justify-content: space-between;
	}
	.info p{
	  white-space: nowrap;
	  text-overflow: ellipsis;
	  overflow: hidden;
	}
	.price{
	  font-weight: bold;
		color: orangered;
	}
	.count {
		position: relative;
		right: -51px;
	}
	.desc{
	  font-size: .8rem;
	}
</style>
